<template>
  <div>
    <div class="mt-5">
      <a-form layout="inline" :model="searchForm" ref="searchFormRef">
        <a-form-item label="热力卡号" name="alipayConsNo">
          <a-input style="width: 200px" v-model:value="searchForm.alipayConsNo" placeholder="请输入热力卡号" />
        </a-form-item>
        <a-form-item label="住户名称" name="holder">
          <a-input style="width: 200px" v-model:value="searchForm.holder" placeholder="请输入住户名称" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="dataSource" :row-class-name="(_record: any, index: number) =>
      index % 2 === 1 ? 'table-striped' : null
      " :pagination="pagination" bordered class="mt-5">
      <template #bodyCell="{ column, text, record }">
        <div v-if="column.dataIndex === 'action'">
          <a-button type="link" @click="payFees">查看</a-button>
          <a-button type="link" @click="onOrder">红冲</a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from 'vue';
import { SearchOutlined, CodeSandboxOutlined } from '@ant-design/icons-vue';
import { getInvoiceInfoApi } from '#/api/core/charge';
import { message } from 'ant-design-vue'

const searchForm = reactive({
  // year: "",
  alipayConsNo: '',
  holder: '',
});
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const searchFormRef = ref(null);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource = ref([]);
const columns = [
  {
    title: '小区名称',
    dataIndex: 'village',
    key: 'village',
    align: 'center',
    // width: 120,
  },
  {
    title: '用户地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
    // width: 150,
  },
  {
    title: '用户姓名',
    dataIndex: 'holder',
    key: 'holder',
    align: 'center',
    // width: 100,
  },
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
    // width: 120,
  },
  {
    title: '抬头',
    dataIndex: 'title',
    key: 'title',
    align: 'center',
    // width: 100,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    // width: 100,
  },
  {
    title: '纳税人识别号',
    dataIndex: 'taxpayerIdentificationNumber',
    key: 'taxpayerIdentificationNumber',
    align: 'center',
    // width: 100,
  },
  // {
  //   title: "上次修改日期",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
  {
    title: '状态',
    dataIndex: 'checkStatus',
    key: 'checkStatus',
    align: 'center',
    // width: 120,
  },
  // {
  //   title: "修改记录",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 120,
  // },
  // {
  //   title: "操作",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 120,
  // },
];
const onSearch = async () => {

  if (props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    const res = await getInvoiceInfoApi({
      page: pagination.current,
      limit: pagination.pageSize,
      treeData: props.selectedNodeId,
      ...searchForm,
    });
    console.log(res);
    dataSource.value = res.data;
    pagination.total = res.total;
  }
};
const onReset = () => {
  searchFormRef.value.resetFields();
};
</script>
<style scoped></style>
